<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    dialogWidth="60%"
    @dialog-close="dialogClose"
  >
    <template #searchPanel>
      <search-panel
        ref="form"
        :addPer="'preGroup:add'"
        :selectPer="'preGroup:selectAll'"
        addTitle="添加权限组"
        @insert="add"
        :showSearchButton="false"
        :showAddButton="true"
      >
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :has-action="true"
        :isShowPage="false"
        :table-column-attributes="tableColumnAttributes"
        :width="160"
      >
        <template #action="{ row }">
          <i
            class="el-icon-user"
            title="成员维护"
            v-permission="'preGroup:members'"
            style="margin-left: 15px; cursor: pointer"
            @click="handleApply(row)"
          ></i>
          <i
            class="el-icon-edit"
            title="编辑权限组"
            style="margin-left: 15px; cursor: pointer"
            v-permission="'preGroup:deleteGroup'"
            @click="updateUser(row)"
          ></i>
          <i
            class="el-icon-delete"
            title="删除权限组"
            v-permission="'preGroup:deleteGroup'"
            style="color: red; margin-left: 15px; cursor: pointer"
            @click="handleDataDelete(row)"
          ></i>
        </template>
      </data-table>
    </template>
    <template #dialog>
      <member-list
      :menu-id-list="menuIdList"
        :current-row="currentRow"
        @submit-arr="submitArr"
      ></member-list>
    </template>
  </base-layout>
</template>

<script>
import baseMixin from '@/mixins/base'
import {
  getList,
  getMembersListId,
  setMembersSave,
  setMembersDelete,
  selecMenuAll,
  setMenuSave,
} from '@/api/pre-sale/permissionManagement'
import memberList from './memberList'
export default {
  components: {
    memberList,
  },
  mixins: [
    baseMixin({
      //     idName: 'id',
      //   deleteData:setMembersDelete
    }),
  ],
  data() {
    return {
      dialogTitle: '',
      tableData: [],
      currentRow: {},
menuIdList:[],
      tableColumnAttributes: [
        {
          name: '权限组名称',
          value: 'name',
          type: 'text',
        },
        {
          name: '组内成员',
          value: 'memberNames',
          type: 'text',
        },
        {
          name: '备注',
          value: 'remark',
          type: 'text',
        },
      ],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    add() {
      this.selecMenuAll({ id: '', name: '',menuIdList:[],select: [] })
    },
    async selecMenuAll({ id, name,menuIdList=[], select=[] }) {
      const { data, success } = await selecMenuAll()
      const newData = data.map((item) => {
        let buttonIds=[];
        item.buttonList.filter(it=>{
            if(select.includes(it.buttonId)){
              buttonIds.push(it.buttonId);
            }
          }) 
        return {
          ...item,
          checkAll: menuIdList.includes(item.id),
          isIndeterminate: false,
          select: buttonIds ,
          list:item.buttonList||[]
        }
      })
      if (success) {
        this.dialogVisible = true
        this.$nextTick(() => {
          this.dialogTitle = id ? '编辑权限组' : '新增权限组'
          this.currentRow = {
            memberList: newData,
            id,
            name,
            type: 'role',
          }
        })
      }
    },
    async handleApply(row) {
      const { data, success } = await getMembersListId(row.id)
      const newData = [
        {
          checkAll: true,
          isIndeterminate: false,
          select: data.memberList.map((item) => item.id),
          name: data.name || '',
          list: data.memberList || [],
        },
        {
          checkAll: false,
          isIndeterminate: true,
          select: [],
          name: '组外人员',
          list: data.otherUserList || [],
        },
      ]
      if (success) {
        this.dialogVisible = true
        this.$nextTick(() => {
          this.dialogTitle = '成员管理'
          this.currentRow = {
            memberList: newData,
            id: data.id,
            name: data.name,
            type: 'member',
          }
        })
      }
    },
    async updateUser({ id, name, menuIdList,buttonIdList }) {
      this.menuIdList=menuIdList
      this.selecMenuAll({ id, name,menuIdList, select: buttonIdList })
    },
    async getList() {
      const { data } = await getList()
      this.tableData = data.map((item) => {
        item.memberNames = item.memberNames.toString()
        return item
      })
    },
    async handleDataDelete(row, content) {
      var con = !content ? '此操作将永久删除该数据, 是否继续?' : content
      this.$confirm(con, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const { success } = await setMembersDelete(row.id)
        if (success) {
          this.$message({
            message: '删除成功',
            type: 'success',
          })
          this.getList()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    async submitArr(param) {
      if (this.currentRow.type === 'role') {
        await setMenuSave(param)
      } else {
        await setMembersSave(param)
      }
      this.dialogClose()
      this.currentRow = {}
      this.getList()
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
